.dwz-list {
	display: block;
	overflow: hidden;
	padding: 0;
	margin: 0;
	cursor: default;
	user-select: none;
	font-weight: 400;
	font-size: @l3;
	list-style-type: none;
	text-align: left;
	.item {
		background-color: @paneBg;
		display: flex;
		margin: 0;
		position: relative;
		list-style: none;
		box-sizing: border-box;
		padding: 10px;
		line-height: 1.6;
		.t-line;
		&.active {
			background-color: @activeBg;
			transition: none;
		}

		// dwz-icon 图标
		i {
			.flex-wrap-center;
			font-size: @l2;
			color: @infoColor;
		}
		// 用户头像
		&.icon-wrap {
			.align-center;
			img {
				display: block;
				max-width: 64px;
				max-height: 64px;
				border-radius: 50%;
			}
		}
		&:first-child {
			border: none;
		}
		&.is-round {
			.box-round;
			.no-line;
			margin-bottom: 10px;
			&:last-child {
				margin-bottom: 0;
			}
		}

		.item-content {
			flex: 1;
		}
		.item-pic {
			.box-line;
		}
		.item-icon {
			.flex-wrap-center;
			.box-line;
			margin-right: 10px;
			width: 64px;
			height: 64px;
			overflow: hidden;
			img {
				display: block;
				max-width: 100%;
				max-height: 100%;
			}
			&.is-round {
				border-radius: 5px;
			}
			&.is-circle {
				border-radius: 50%;
			}
			&.is-md {
				width: 40px;
				height: 40px;
			}
			&.is-sm {
				width: 24px;
				height: 24px;
			}
			&.is-mini {
				width: 16px;
				height: 16px;
			}
		}

		// 列表元素左滑出现操作按钮
		.item-right {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			z-index: 10;
			min-width: 80px;
			transition: all 0.5s ease;
			transform: translate3d(105%, 0px, 0px);
			display: flex;
			justify-content: space-around;

			.del-btn {
				background: red;
				color: #fff;
				.full-size;
				.flex-wrap-center;
			}

			.icon {
				margin-left: 20px;
				&:first-child {
					margin-left: 0;
				}
			}
		}
		&.open-right {
			.item-right {
				transform: translate3d(0px, 0px, 0px);
			}
		}
	}

	&.scroll-x {
		.item {
			&:before {
				border: none;
			}
		}
	}
}

ul.pic-list {
	.item {
		.flex-wrap;

		.item-pic {
			.flex-wrap-center;
			margin: 2px 10px 2px 0;
			width: 100px;
			height: 75px;
			overflow: hidden;
			border-radius: 5px;

			&.user-icon {
				width: 90px;
			}

			img {
				display: block;
				width: 100%;
			}
		}

		.item-content {
			.flex-wrap-v;
			.flex-1;
			position: relative;
			overflow: hidden;
			.item-tag {
				color: @infoColor;
				background: @inputBg;
				border-radius: 3px;
				padding: 0 2px;
				margin-right: 4px;
				font-size: @l5;
				display: inline-block;
			}

			.item-price,
			.item-phone {
				line-height: 24px;
				font-size: @l2;
				color: @linkColorActive;
			}
		}
	}

	&.scroll-x {
		.item {
			border: none;
		}

		.item-pic {
			margin: 0;
			width: 200px;
			height: 150px;
		}

		.item-content {
			width: 200px;
			margin-top: 5px;
		}
	}
}

.search-bar,
.dateRange {
	&.bar {
		transition: all 0.5s ease;
		transform: translate3d(0px, 0px, 0px);
		width: 100%;
	}

	.item-input {
		.flex-wrap-center;
		flex: 1 0;
		border-radius: 5px;
		padding-right: 8px;
		padding-left: 8px;
		background: @inputBg;

		.icon {
			width: 15px;
			height: 15px;
			background-repeat: no-repeat;
			background-position: center;
		}

		.icon-search {
			background-color: transparent;
			border: none;
			background-size: 100%;
			background-image: url('../../image/icon/icon-search.svg');
		}

		input[type='search'] {
			.flex-1;
			padding: 2px 5px;
			height: 28px;
			color: @titleColor;
			border: 0;
			vertical-align: middle;
			font-size: @l3;
			line-height: 16px;
			outline-offset: 0;
			outline-style: none;
			outline-width: 0;
			background-color: transparent;
		}
	}
}

.hideBarCtl {
	header,
	&main > section,
	&.page-wrap > section {
		transition: all 0.5s ease;
	}

	&.hideBar {
		header {
			transform: translate3d(0px, -44px, 0px);
		}
		&main > section,
		&.page-wrap > section {
			margin-top: -44px;
		}
	}
}

.top-btn {
	position: absolute;
	bottom: 20px;
	right: 20px;
	transition: all 0.5s ease;
	transform: translate3d(0px, 0px, 0px);
	width: 50px;
	height: 50px;
	text-indent: -10000px;
	background: url('../../image/icon/top-btn.svg') 0 0 no-repeat;
	background-size: 100%;

	&.hide {
		transform: translate3d(0px, 70px, 0px);
	}
}
